<style>
.detail{
	display: flex;
	flex: 1;
	flex-direction: column;
}
.top-img{
	
}
.top-img image,.top-img img{
	width: 100%;
	max-height: 620upx;
}
.title{
	padding: 8upx 14upx;
    display: flex;
	flex: 1;
	justify-content: space-between;
	font-size: 32upx;
	color: #999;
}
.detail{
	padding: 8upx 14upx;
	font-size: 34upx;
	color: #444;
	line-height: 1.2;
}
.getBtn{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 0;
}
.integral{
	display: flex;
	flex-direction: row;
	padding: 20upx 0;
	border-bottom: 1upx solid #e6e6e6;
}
.integral .item{
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items:center;
	position: relative;
	font-size: 28upx;
	
}
.integral .item .txt{
	margin-top: 16upx;
	font-weight: 600;
}
.integral .item .border{
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -20upx;
	height: 40upx;
	width: 3upx;
	background: #e6e6e6;
}
</style>
<template>
	<div class="detail">
		<div class="top-img">
			<!-- <image :src="img" mode="widthFix"></image> -->
			<img :src="goods.pic" alt="">
		</div>
		<div class="sell-container">
			<!-- <div class="title">
				<span class="place">{{goods.name}}</span>
				<span class="price">¥{{goods.price}}</span>
				<span>此商品最多可用{{goods.maxcoupon?goods.maxcoupon:0}}点金券</span>
			</div> -->
			<div class="integral">
				<div class="item">
					<div class="border"></div>
					<div>名称</div>
					<div class="txt">{{goods.name}}</div>
				</div>
				<div class="item">
					<div class="border"></div>
					<div>价格/充值金</div>
					<div class="txt">{{goods.price}}</div>
				</div>
				<div class="item">
					<div>会员门槛</div>
					<div class="txt">{{goods.uselevel?goods.uselevel+'级':'无门槛'}}</div>
				</div>
			</div>
			<div class="detail">{{goods.content}}</div>
		</div>
		<div>
			<!-- <button type="primary" class="getBtn">领取优惠券</button> -->
			<!-- <button type="primary" class="getBtn" @click="payPre">立即购买(￥{{money}})</button> -->
			<button type="primary" class="getBtn" @click="payPre">兑换</button>
		</div>
		<!-- <div class="mask">
			<div class="mask-box">
				<div>可用点金券</div>
				<div></div>
			</div>
		</div> -->
	</div>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				// img:'../../../static/img/lingshi.png',
				img:'http://img.alicdn.com/imgextra/i1/725677994/TB2c_IKc4TpK1RjSZR0XXbEwXXa_!!725677994-0-sm.jpg_760x760Q50s50.jpg_.webp',
				detail:'豪士乳酸菌小白酸奶口袋面包680g早餐心里软糕点心网红零食',
				sellNum:'710',
				nowPrice:'35',
				oldPrice:'45',
				city:'石家庄',
				goods:{},
				coupon:0,
				balance :0
			};
		},
		computed:{
		    ...mapState(['hasLogin', 'forcedLogin','userInfo']),
			money(){
				let maxcoupon = this.goods.maxcoupon ? this.goods.maxcoupon : 0
				let coupon = this.coupon > maxcoupon ? maxcoupon : this.coupon
				return this.goods.price - coupon
			}
		},
		methods:{
			...mapMutations(['setAddress']),
			getUserInfo(){
				let that = this
				uni.request({
					url: this.httpUrl + 'user/queryOneByPk',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id:that.userInfo.uid
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
						    that.coupon = res.data.data.coupon ? res.data.data.coupon :0
							that.balance = res.data.data.balance
							that.setAddress(res.data.data.address)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			payPre(){
				let that = this
				let uid = this.userInfo.uid
				 if(!uid){
				   uni.navigateTo({
					url:'../../login/login'
				   })
				}
				else if(uid && this.balance<this.goods.price){
					uni.navigateTo({
						url:'../../user/charge/charge?charge=1'
					})
				}
				else if(uid && !that.userInfo.address){
					uni.showModal({
						title: '提示',
						content: '请填写地址',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'../../user/changeUserInfo/changeUserInfo'
								})
							} else if (res.cancel) {
								
							}
						}
					})
				}else{
					// let money = this.money
					let money = this.goods.price
					uni.request({
						url: this.httpUrl + 'userOrder/buy',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							uid:uid,
							usemoney:money,
							gid:that.goods.gid
						},
						success: (res) => {
							if (res.data.code == 1) {
								uni.showToast({
									title: '兑换成功',
									icon: 'none',
									mask: true
								})
								that.getUserInfo()
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									mask: true
								})
							}
						}
					})
					
				}
			},
			pay(payJson){
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: payJson, 
					success: function (res) {
						console.log('success:' + JSON.stringify(res));
// 						wx.showToast({
// 							title:'success'
// 						})
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			getGoodsDetail(){
				let that = this
				uni.request({
					url: this.httpUrl + 'goods/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						gid:that.gid,
						pageNum: 1,
						pageSize: 1
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							that.goods = res.data.data.data[0]
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			}
		},
		onLoad(item) {
			// this.goods = JSON.parse(item.item)
			console.log(item);
			this.gid = item.gid
			this.getGoodsDetail()
			// console.log(this.goods)
		},
		onShow() {
			let uid = this.userInfo.uid
			 if(uid){
			   this.getUserInfo()
			}
			
		}
	}
</script>
